<template>
  <a-modal
    :maskClosable="maskClosable"
    title="添加数据中心"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="数据中心名称">
          <a-input
            autocomplete="off"
            v-decorator="[
              'name',
              {
                rules: [
                  { required: true, message: '数据中心名称不能为空' },
                  { validator: this.validators.noWhitespace() },
                  { validator: this.validators.noIllegalString() },
                  {
                    max: 30,
                    message: '长度在 1 到 30 个字符',
                    trigger: 'blur',
                  },
                ],
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="ip">
          <a-input
            autocomplete="off"
            v-decorator="[
              'ip',
              {
                rules: [
                  { required: true, message: 'ip不能为空' },
                  {
                    pattern:
                      /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/g,
                    message: 'ip地址格式不符合',
                  },
                ],
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="架构">
          <a-select
            :getPopupContainer="
              (triggerNode) => {
                return triggerNode.parentNode || document.body;
              }
            "
            v-decorator="[
              'structure',
              { rules: [{ required: true, message: '架构不能为空' }] },
            ]"
          >
            <a-select-option
              v-for="(item, index) in structureMap"
              :key="'state_' + index"
              :value="item"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item extra="多个机房请用逗号分隔" label="机房">
          <a-input
            autocomplete="off"
            v-decorator="[
              'rooms',
              {
                rules: [
                  { validator: this.validators.noWhitespace() },
                  {
                    max: 100,
                    message: '长度在 1 到 100 个字符',
                    trigger: 'blur',
                  },
                ],
              },
            ]"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { gPostAction } from "@/api/manage";
export default {
  name: "AddModal",
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      name: "",
      structureMap: ["x86", "arm"],
      ip: "",
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      url: {},
      maskClosable: false,
    };
  },
  methods: {
    add() {
      this.form.resetFields();
      // this.name = ''
      // this.ip = ''
      this.visible = true;
    },
    handleOk(e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          // console.log(values)
          const postData = {
            ip: values.ip,
            name: values.name,
            structure: values.structure,
            rooms: values.rooms,
          };
          gPostAction("/asset/createDatacenter", postData)
            .then((res) => {
              if (res.success) {
                this.$message.success("操作成功");
                this.$emit("ok");
              }
            })
            .finally(() => {
              this.confirmLoading = false;
              this.visible = false;
            });
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>